<html>
<head>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<script src="multiplayer.js"></script>
	<script>
		// tell webkit not to move the entire browser window if they try to finger scroll
		function sticky() { document.body.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); };
	</script>
	<script>
	var c = null;
	var timer = null;
	var b = 0;
	var player = null;
	
	// a list of all clients, by ID
	var clients = {};
	
	function Client() {
		// this client's state
		this.state = {
			"down": false,
			"position": [100, 100]
		};
		
		// create a visual identifier of this client
		var div = document.createElement("div");
		div.style.position = "absolute";
		div.style.width = "5px";
		div.style.height = "5px";
		document.body.appendChild(div);
		
		// update from our state
		this.update = function(newstate) {
			this.state = newstate;
			div.style.left = this.state.position[0] - 2;
			div.style.top = this.state.position[1] - 2;
			div.style.backgroundColor = this.state.down ? "red" : "black";
		}
		
		this.destroy = function() {
			document.body.removeChild(div);
		}
	}
	
	// my own representation
	var me = null;
	
	// run this when we start
	function launch() {
		// my own representation
		me = new Client();
		
		// connection to the server
		c = multiplayer.connect();
		
		// call when we are connected to the server
		c.on("connected", function() {
			console.log("CONNECTED");
			// every three seconds send something wacky
			timer = setInterval(function() {
				c.broadcast("timer", {"random": Math.random()});
			}, 3000);
			//c.set_state({"down": false, "position": [0, 0]});
		});
		
		// called when our connection times out
		c.on("timeout", function() {
			console.log("TIMED OUT");
		});
		
		// called when we are disconnected from the server
		c.on("disconnected", function() {
			console.log("DISCONNECTED");
			clearInterval(timer);
		});
		
		// custom method when someone presses the button
		c.on("button", function(data) {
			console.log("BUTTON DATA: " + data.id + " " + data.payload.counter);
		});
		
		// custom method when someone's timer goes off
		c.on("timer", function(data) {
			console.log("TIMER DATA: " + data.id + " " + data.payload.random);
		});
		
		// when another client's permanent state is updated
		c.on("client_state", function(data) {
			console.log("Client UPDATE: " + data.id + " " + data.state);
			if (!clients[data.id]) {
				clients[data.id] = new Client();
			}
			clients[data.id].update(data.state);
		});
		
		// when another client has been removed from the server
		c.on("client_disconnected", function(id) {
			console.log("Client DISCONNECT: " + id);
			if (clients[id]) {
				clients[id].destroy();
				delete clients[id];
			}
		});
	}
	
	// connect some events to the main part of the page
	
	function attachEvent(name, func) {
		if (document.addEventListener) {
			document.addEventListener(name, func, false);
		} else if (document.attachEvent) {
			document.attachEvent("on" + name, func);
		} else {
			boss["on" + name] = func;
		}
	}
	
	var down = false;
	attachEvent("mousedown", function(ev) {
		if (c) {
			var e = ev ||  window.event;
			down = true;
			var data = {"down": down, "position": [e.clientX, e.clientY]};
			c.set_state(data);
			me.update(data);
		}
	});
	
	attachEvent("mousemove", function mousemove(ev) {
		if (c) {
			if (down) {
				var e = ev || window.event;
				var data = {"down": down, "position": [e.clientX, e.clientY]};
				c.set_state(data);
				me.update(data);
			}
		}
	});
	
	attachEvent("mouseup", function onmouseup(ev) {
		if (c) {
			var e = ev || window.event;
			down = false;
			var data = {"down": down, "position": [e.clientX, e.clientY]};
			c.set_state(data);
			me.update(data);
		}
	});
	</script>
	<style>
		body {
			width: 320px;
			height: 480px;
			margin: 0px;
			padding: 0px;
			border: 1px solid black;
		}

		<!--
			* {
				-webkit-touch-callout: none;
				-webkit-tap-highlight-color: rgba(0,0,0,0);
				-webkit-text-size-adjust: none;
				-webkit-user-select: none;
			}
		-->
	</style>
</head>
<body onload="sticky(); launch();">
<button onclick="c.broadcast('button', {'counter': b++})">send stuff</button>
</body>
</html>
